<template>
  <div>
    <el-card class="box-card">
      <el-button
        class="btn-add"
        @click="AdddialogVisible=true"
        size="mini">
        添加
      </el-button>
      <dict-add v-if="AdddialogVisible" :visible.sync="AdddialogVisible" :admin="admin" :closeAdd="closeAdd" :init="initialize"></dict-add>
      <el-button
        class="btn-delete"
        @click="deleteBulk"
        size="mini">
        批量删除
      </el-button>
      <el-input v-model="query" placeholder="请输入名称" size="mini"  :style="{width:'200px'}"></el-input>
      <el-button
        class="btn-delete"
        @click="queryName"
        size="mini">
        查询
      </el-button>
    </el-card>
      <el-table
        :data="tableData"
        style="width: 100%;text-align: center" @select-all="selectionChange" @select="selectChange">
        <el-table-column
          prop="checkbox"
          label="" type="selection" width="180">
        </el-table-column>
        <el-table-column width="180"
          prop="dictName"
          label="字典名称">
        </el-table-column>
        <el-table-column
          prop="dictCode"
          label="字典编码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="180">
        </el-table-column>
        <el-table-column width="180"
          prop="delFlag"
          label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.delFlag"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="updateStatus(scope.row.id,scope.row.delFlag)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column width="180"
          prop="createBy"
          label="创建人">
          <!--          字段待定-->
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间" width="180">
        </el-table-column>

        <el-table-column width="180"
          prop="updateBy"
          label="更新人"  style="position: relative;z-index: 999">
        </el-table-column>
        <el-table-column width="180"
          prop="updateTime"
          label="更新时间"  style="position: relative;z-index: 999" >
        </el-table-column>
        <el-table-column
          prop="type"
          label="字典类型" width="180"  style="position: relative;z-index: 999">
         <span v-if="type==1">数字</span>
          <span v-if="type==0">字符串</span>
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="dictUpdateMtehod(scope.row)">编辑</el-button>
            <dict-update v-if="UpdatedialogVisible" :admin="admin" :visible.sync="UpdatedialogVisible" :updateClose="closeUpdate" :init="initialize" :dict="dict"></dict-update>
            <span class="wrapper">
              <el-button
                size="mini"
                type="warning"
                @click="management(scope.row)">管理</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<style>
.el-table td, .el-table th {

  text-align: center;
}
</style>

<script>
import axios from "axios"
import dictAdd from "./dictAdd"
import dictUpdate from "./dictUpdate"
export default {
  data () {
    return {
      tableData: [],
      AdddialogVisible:false,
      UpdatedialogVisible:false,
      dict:{},
      selectCheckBox:[],
      query:'',
      admin:""
    }
  },
  methods:{
    //初始化方法
    initialize(){
      var admin = Cookie.get("admin")
      this.admin=JSON.parse(admin);
      axios.get("http://localhost:8102/dict").then((data)=>{
      this.tableData=data.data.records;
        console.log(data.data.records)
      })
    },
    //关闭添加弹窗
    closeAdd(){
      this.AdddialogVisible=false;
    },
    //修改状态
    updateStatus(id,status){
      axios.put("http://localhost:8102/dict",{
        id:id,
        delFlag:status
        }
      ).then((data)=>{
        console.log(data)
      });
    },
    //批量操作
    deleteBulk(){
      this.$confirm('是否全部停用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.selectCheckBox)
        var json=JSON.stringify(this.selectCheckBox);
        console.log(json)
        if(this.selectCheckBox.length!=0){
          axios.post("http://localhost:8102/dict/batchUpdate",{
            json
          }).then((data)=>{
            this.$message({
              type: 'success',
              message: '停用成功!'
            });
            this.selectCheckBox=[];
            this.initialize();
          })
        }else{
          this.$message({
            type: 'warning',
            message: '当前未选择!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消停用'
        });
      });
    },

    dictUpdateMtehod(row){
      this.dict=row;
      this.UpdatedialogVisible=true;
    },
    //关闭编辑弹窗
    closeUpdate(){
      this.UpdatedialogVisible=false;
    },
    //查询
    queryName(){
      if(this.query!=""&&this.query!=null){
        axios.get("http://localhost:8102/dict/queryName?name="+this.query).then((data)=>{
          this.tableData=data.data;
        })
      }else{
        this.initialize();
      }
    },

    //批量操作
    selectChange(val,row){
      console.log(row,val);
      if(val.length==0){
        console.log("取消选择");
        this.removeWithoutCopy(this.selectCheckBox,row.id);
        console.log(this.selectCheckBox)
      }else{
        this.selectCheckBox.push(row);
      }
    },
    //批量操作
    selectionChange(val,row){
      console.log(val,row);
      if(val.length!=0){
        /*for (const i in val) {
          this.selectCheckBox.push(val[i].adminId);
        }*/
        for (let i = 0; i <val.length ; i++) {
          this.selectCheckBox.push(val[i]);
        }
      }else{
        console.log("取消全选");
        this.selectCheckBox=[];
      }
    },
    //移除数组方法
    removeWithoutCopy(arr, item) {
      for(var i = 0; i < arr.length; i++){
        if(arr[i].id == item){
          //splice方法会改变数组长度，当减掉一个元素后，后面的元素都会前移，因此需要相应减少i的值
          arr.splice(i,1);
          i--;
        }
      }
      return arr;
    },
    management(row){
      this.$router.push({
        path: "/dictItem",
        query:{
          id: row.id
        }
      })
    }
  },
  mounted () {
    this.initialize();
  },
  components:{
      "dict-add":dictAdd,
    "dict-update":dictUpdate
  }

}
</script>
